<template>
    <div class="right1">
        <section class="cards">
            <div class="card card1">
                <p class="title">续保成功率</p>
                <span class="value">32.12<span class="unti">%</span></span>
            </div>
            <div class="card card2">
                <p class="title">续保任务战败数</p>
                <span class="value">3723</span>
            </div>
            <div class="card card3">
                <p class="title">续保任务战败率</p>
                <span class="value">66.52<span class="unti">%</span></span>
            </div>
        </section>

        <section class="section">
            <div class="section__title">续保漏斗</div>
            <div class="chart-box">
                <div class="chart">
                    <img src="../../assets/img/funnel.png" alt="funnel">
                </div>
                <ul class="chart__list">
                    <li v-for="(item, index) in list" :key="index" class="chart__item">
                        <div class="chart__item--title" ><span>{{ item.name }}</span></div>
                        <div class="chart__item--value" :style="{color:item.color}"><span>{{ item.value }}</span></div>
                    </li>
                </ul>

            </div>
        </section>
    </div>
  </template>
  
<script setup>
import { ref,computed } from 'vue'

//模拟数据
const list=ref([
    {name:"续保任务数",value:Math.round(Math.random()*10000),color:"#0e33bf"  },
    {name:"任务限进数",value:Math.round(Math.random()*10000),color:"#c6ad08"   },
    {name:"任务成交数",value:Math.round(Math.random()*10000),color:"#27c00d"  },
])

</script>

<style lang="scss" scoped>
@import "../../assets/style/main.scss";
$color-border:#494949;
$color-green:#57f13c;
$color-red:#a6133f;
.right1{
    position: relative;
    width: 100%;
    // height: 100%;
    margin-top: 6.6rem;
    // border: 1px solid #fff;
    display: flex;
    justify-content: flex-end;
}
.cards{
    position: absolute;
    
    width: 11.2rem;
    height: 15rem;
    top: 3.4rem;
    left: 2.6rem;
    .card{
        width: 100%;
        padding: 5px;
        border-top: 1px solid $color-border;
        border-bottom: 1px solid $color-border;
        background-color: rgba(0,0,0,0.2);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        letter-spacing: 1px;
        .title{
            font-size: .8rem;
            margin-top: 2px;
        }
        .value{
            font-size: 2rem;
            color:$color-red;
        }
        .unti{
            font-size: 1.2rem;
        }
        &1{
            height:5.6rem;  
            >.title{
                font-size: 1rem;
            } 
            >.value{
                font-size: 2.8rem;
                color:$color-green;
            }
        }
        &2{
            margin-top: .8rem;
            margin-left: 3rem;
            width: 72%;
            height:4rem;
        }
        &3{
            margin-top:.4rem;
            margin-left: 3rem;
            width: 72%;
            height:4rem;
        }
    }
}
.section{   
    width: 42.1rem;
    height: 18.2rem;    
    .chart-box{
        height: 16.6rem;
        border-top: 1px solid $color-border;
        border-bottom: 1px solid $color-border;
        // border: 1px solid red;
        display: flex;
        background-color: rgba(0,0,0,0.2);
        position: relative;
    }
    .chart__list{
        list-style: none;
        // border: 1px solid yellow;
        position: absolute;
        // margin-top:10px;
        margin-left: 21.6rem;
    }
    .chart__item{
        display: flex;      
        padding-top:1.4rem;
        align-items: baseline; // 对齐文字的基线，比 flex-end 更自然
        gap: 5rem;  
        letter-spacing:1px;
        &--title{
            font-size: 1rem;
        }
        &--value{
            display: flex;
            align-items: flex-end; // 让 span 贴底
            height: 100%;          // 确保 div 足够高
            font-size: 3rem;
            line-height: 1;
            span {
                display: inline-block;
                line-height: 1;
            }
        }

    }
    .chart{
        flex: 1;
        display: flex;
        justify-content: center;
        img{
            // margin-left: 20px;
            margin-top: 1.2rem;
            height: 80%;
        }
    }

}





</style>